
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
	<title>PlotKit Documentation | liquidx</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
	<link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
	<link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />	
	<link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
	<link rel="icon" href="/favicon.png" type="image/x-png">
	<link rel="shortcut icon" href="/favicon.png" type="image/x-png">
	<!--[if lt IE 7.]>	
	<script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
	<![endif]-->
	
<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="header">
        <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
		<div id="menu-hack">
			<div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>			
            <div id="menu-main">
        		<ul id="menu" class="code">
            		<li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
            		<li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
            		<li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
            		<li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
             		<li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
             		<li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
             		<li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
             		<li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
             		<li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
        		</ul>
        	</div>
    	</div>
		<div id="quickbuttons">
			<span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
			<span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
			<span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
		</div>
		
	</div>
    
    <div id="body">
<div class="page doc">


<h1> PlotKit</h1>
<p> <a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a Javascript graph plotting library. It is aimed at web
   applications that require plotting series of data in modern web
   browsers. 
</p>
<p>PlotKit requires <a href="http://mochikit.com/">MochiKit</a>. (1.3 or higher)
</p>
<p>PlotKit supports both HTML Canvas and SVG, along with an 
   <a href="http://me.eae.net/archive/2005/12/29/canvas-in-ie/">emulated canvas for Internet Explorer</a>.
</p>
<p>PlotKit is easily extensible to include other rendering engines,
   styles and layouts. Please pursue the documentation for more
   information.
</p>
<p>PlotKit is licensed under the BSD License, so you can include it in
   your free or commercial applications without worrying.
</p>

<h1> PlotKit Components</h1>

<h2> Base Classes</h2>
<ul>
 <li>
      <a href="PlotKit.Base.html">Base</a> : Common functionality that is used in other classes,
  including default styles.
 </li>

 <li>
      <a href="PlotKit.Layout.html">Layout</a> : The default chart layout engine, supports bar, line and
           pie charts.
 </li>

 <li>
      <a href="PlotKit.Renderer.html">Renderer</a>: Customising the look of the output
 </li>
</ul>

<h2> Renderer Specific Implementations</h2>
<ul>
 <li>
      <a href="PlotKit.Canvas.html">CanvasRenderer</a>: Basic renderer using an HTML Canvas.
 </li>

 <li>
      <a href="PlotKit.SVG.html">SVGRenderer</a>: Basic renderer using SVG.
 </li>

 <li>
      <a href="PlotKit.SweetCanvas.html">SweetCanvasRenderer</a>: Customised Renderer that builds on CanvasRenderer to provide nicer looking charts.
 </li>

 <li>
      <a href="PlotKit.SweetSVG.html">SweetSVGRenderer</a>: Customised renderer that builds on SVGRenderer to provide nicer looking charts.
 </li>
</ul>

<h2> Utility Classes</h2>
<ul>
 <li>
      <a href="PlotKit.EasyPlot.html">EasyPlot</a>: Simple Wrapper around classes to provide one-line plotting.
 </li>
</ul>

<h1> Getting Started</h1>
<ul>
 <li>
      <a href="PlotKit.QuickStart.html">PlotKit Quick Start</a> - A thorough quick start to getting charts working for Safari, Mozilla, Firefox, Opera and IE.
 </li>

 <li>
      <a href="SVGCanvasCompat.html">SVG/Canvas Browser Support Status</a> - Quirks about browser support that you should know about.
 </li>

 <li>
      <a href="http://media.liquidx.net/js/plotkit-tests/quickstart.html">Simple Canvas Demo</a> - Very basic Canvas demo all contained in an HTML file.
 </li>

 <li>
      <a href="http://media.liquidx.net/js/plotkit-tests/quickstart-svg.html">Simple SVG Demo</a> - Very basic SVG demo all contained in an HTML file.
 </li>
</ul>

<h1> More Demos</h1>
<ul>
 <li>
     Unit Tests <a href="http://media.liquidx.net/js/plotkit-tests/basic.html">Canvas</a>, <a href="http://media.liquidx.net/js/plotkit-tests/svg.html">SVG</a>, <a href="http://media.liquidx.net/js/plotkit-tests/sweet.html">SweetCanvas</a>, <a href="http://media.liquidx.net/js/plotkit-tests/sweet-svg.html">SweetSVG</a>.
 </li>

 <li>
      <a href="http://media.liquidx.net/js/plotkit-tests/dynamic.html">Dynamic Charting</a>.
 </li>

 <li>
      <a href="http://media.liquidx.net/js/plotkit-tests/labels.html">Labels Example</a>. Thanks to Christopher Armstrong.
 </li>

 <li>
      <a href="http://media.liquidx.net/js/plotkit-tests/labels-img.html">Labels with Images</a>.
 </li>

 <li>
      <a href="http://media.liquidx.net/js/plotkit-tests/axis.html">Axis Restrictions</a>.
 </li>
</ul>

<h1> Version History</h1>

<h3>PlotKit 0.8</h3>
<ul>
 <li>
     Total rewrite from <a href="http://www.liquidx.net/canvasgraphjs/">CanvasGraph 0.7</a> 
 </li>
</ul>

<h3>PlotKit 0.9</h3>
<ul>
 <li>
     Fixed some redraw issues with clear()
 </li>

 <li>
     Replaced IECanvas.HTC with ExplorerCanvas
 </li>

 <li>
     Added auto import and packed versions just like MochiKit.
 </li>

 <li>
     Added horizontal bar chart rendering mode.
 </li>

 <li>
     Added awareness of prototype.js and workaround Array/Object mutilation issues with MochiKit.
 </li>

 <li>
     Added EasyPlot for single line plotting with Ajax support.
 </li>

 <li>
     More tests, <a href="http://media.liquidx.net/js/plotkit-tests/dynamic.html">dynamic charting</a> and quickstart demos.
 </li>
</ul>

<h3>PlotKit 0.9.1</h3>
<ul>
 <li>
     Make Sweet{Canvas/SVG}Renderers respect shouldFill.
 </li>

 <li>
     Fixed ignoring of maximum x and y values when setting xAxis/yAxis.
 </li>

 <li>
     Fixed typo for calculating yrange in Layout.js (thanks to
     HubrisSonic).
 </li>

 <li>
     Changed SweetCanvasRenderer to use axisLineColor for drawing lines over 
     background (thanks to HubrisSonic).
 </li>

 <li>
     Fixed bug in y-axis tick drawing (thanks to Cliff).
 </li>

 <li>
     Fixed x-axis calculation bug when xAxisIsZero is false (thanks to 
     Loic Jeannin)
 </li>

 <li>
     Fixed xTicks drawing that exceed the bounds of the chart (thanks to
     Cliff)
 </li>

 <li>
     Fixed barchart drawing with only 2 values (thanks to HubrisSonic)
 </li>

 <li>
     Hide pie chart labels of 0% (thanks to Attiks)
 </li>

 <li>
     Added optional field to addDatasetFromTable to include x-axis labels.
 </li>

 <li>
     Updated excanvas.js version to fix possible printing issues.
 </li>
</ul>

<h1> Road Map</h1>

<h3>Version 0.9</h3>
<ul>
 <li>
     AutoSelectRenderer, automatically choose Canvas or SVG by auto detecting browser support.
 </li>
</ul>

<h3>Version 0.10</h3>
<ul>
 <li>
     Point plots
 </li>

 <li>
     Defined Event System Support
 </li>

 <li>
     Animation support.
 </li>
</ul>


</div>
</div>

    
	
    
    <div id="footer">
		<div class="block">
			<h3>Syndication Feeds:</h3>
			<p>
				<ul class="tiny">
					<li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
					<li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
					<li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
					<li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
				</ul>
			</p>
		</div>
		<div class="block">
			<h3>About this site:</h3>
			<p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified. 
			Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
			<p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
			<p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
		</div>
		<div class="block">
			<h3>Is Made Possible By:</h3>
			<p>
			<dl>
				<dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
				<dd>Blogging client for Mac</dd>
				<dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
				<dd>Python Web Framework</dd>
				<dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt> 
				<dd>Really Fast Web Server</dd>
				<dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
				<dd>FastCGI for Python</dd>
			</dl>
			</p>
		</div>
        <div class="block">
            <h3>Search My Sites:</h3>
            <p>
           <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
               </p>
          </div>
         
    
		<div class="clear">&nbsp;</div>
        
    </div>



   <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
   <script type="text/javascript">
   _uacct = "UA-58117-1";
   urchinTracker();
   </script>

</body>
</html>
